<template>
  <div id="app" :style="backgroundDiv">
    <div id="mybackground"><MyImg/></div>
    <div id="title"><img v-bind:src="titleimg"/></div>
    <div id="time"><Mytime/><div style="width: 10px"></div></div>
    <div id="content">
      <div class="column1">
        <div class="row1"><Border><Bargraph slot="header"></Bargraph></Border></div>
        <div class="row2"><Border><PUCircle slot="header"></PUCircle></Border></div>
        <div class="row3"><Border><Pieb slot="header"></Pieb></Border></div>
        <div class="row4"><Border><Huanjingpingjia slot="header"></Huanjingpingjia></Border></div>
      </div>
      <div class="column2">
        <div class="row3"><Border><Smallnoise slot="header"></Smallnoise></Border></div>
      </div>
      <div class="column3">
        <div class="row3"><Border><Linechart slot="header"></Linechart></Border></div>
      </div>
      <div class="column4">
        <div class="row1"><Border><Air slot="header"></Air></Border></div>
        <div class="row2"><Border><Water slot="header"></Water></Border></div>
        <div class="row3"><Border><Cityclass slot="header"></Cityclass></Border></div>
      </div>
    </div>
  </div>
</template>

<script>
  import Ground from './components/ground'
  import Air from './components/air'
  import Water from './components/water'
  import Border from './components/border'
  import Bargraph from './smallcomponents/bargraph'
  import Linechart from './smallcomponents/line_chart'
  import Cityclass from './smallcomponents/cityclass'
  import Smallnoise from './smallcomponents/smallnoise'
  import PUCircle from './smallcomponents/circle'
  import Pieb from './smallcomponents/pie2'
  import Huanjingpingjia from './components/huanjingpingjia'
  import MyImg from './components/showimg'
  import Mytime from './components/mytime'

  export default {
    name: 'app',
    data () {
      return {
        backgroundDiv: {
          backgroundImage: 'url(' + require('./img/img4.jpg') + ')',
          backgroundRepeat: 'no-repeat',
          backgroundSize: '100% 100%'
        },
        titleimg: require('./img/title.png')
      }
    },
    components: {
      Ground, Air, Water, Bargraph, Linechart, Cityclass, Smallnoise, PUCircle, Huanjingpingjia, Border, MyImg, Pieb, Mytime
    }
  }
</script>
<style>
  * {
    padding: 0;
    margin: 0;
  }

  html, body {
    height: 100%;
    width: 100%;
  }

  #app {
    height: 100%;
    width: 100%;
    position: relative;
  }
</style>
<style scoped>
  #title {
    position: absolute;
    width: 100%;
    height: 7%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #time {
    position: absolute;
    width: 100%;
    height: 5%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
  #mybackground{
    position: absolute;
    width: 100%;
    height: 100%;
  }
  #title img{
    height: 100%;
    width: auto;
  }

  #content {
    position: absolute;
    top:6%;
    width: 100%;
    height: 94%;
    display: flex;
    flex-direction: row;
    justify-content: space-around
  }

  #content .column1, #content .column2, #content .column3, #content .column4 {
    display: flex;
    flex-direction: column;
    /*opacity:0.8;*/
    /*-moz-opacity:0.8;*/
    /*filter:alpha(opacity=80);*/
  }
  #content .column1, #content .column4{
    height: 99%;
    width: 27%;
    justify-content: space-between;
  }
  #content .column2, #content .column3{
    height: 99%;
    width: 22%;
    justify-content: flex-end;
  }
  #content div div{
    width: 100%;
  }
  #content .column1 .row1{
    height: 38%;
  }
  #content .column1 .row2{
    height: 23%;
  }

  #content .column2 .row3,
  #content .column3 .row3{
    height: 35%;
  }
  #content .column1 .row3{
    height: 15%;
  }
  #content .column1 .row4{
    height: 20%;
  }
  #content .column4 .row1{
    height: 47%;
  }
  #content .column4 .row2{
    height: 18%;
  }
  #content .column4 .row3{
    height: 35%;
  }
</style>
